<template>
    <div class="logining">
        <div class="logo"><img src="../../common/image/LOGO.png" alt=""></div>
        <div class="form_box">
            <input type="text" :value="account" disabled>
            <input type="password" name="original" v-on:input="original" placeholder="请输入原密码">
            <input type="password" name="pasw" v-on:input="pasw" placeholder="请输入新密码">
            <button @click="login">确认修改</button>
        </div>
        <div class="pasw"><router-link to="/forget">忘记密码?</router-link></div>
        <div class="registerby"><router-link to="/personal">返回个人中心</router-link></div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import { RequestGet,RequestPost} from '@/api/http.js'
    export default {
        data (){
            return{
                originals:'',
                paswnum:'',
                account:'m15521007466@163.com'
            }
        },
        methods:{
            original(e){
                let original = document.querySelector('input[name=original]');
                this.originals = e.target.value;
                if(this.originals != ''){
                    original.style.border = 'none';
                    original.className = '';
                    if(!(/^[0-9a-zA-Z]{6,30}$/.test(this.originals))){
                        original.style.border = '1PX solid red';
                        original.className = 'active_no';
                        Toast({
                            message: '请输入正确的密码！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        original.style.border = 'none';
                        original.className = '';
                    }
                }
            },
            pasw(e){
                let pasw = document.querySelector('input[name=pasw]');
                this.paswnum = e.target.value;
                if(this.paswnum != ''){
                    pasw.style.border = 'none';
                    pasw.className = '';
                    if(!(/^[0-9a-zA-Z]{6,30}$/.test(this.paswnum))){
                        pasw.style.border = '1PX solid red';
                        pasw.className = 'active_no';
                        Toast({
                            message: '请输入正确新的密码！',
                            position: 'top',
                            duration: 3000
                        });
                    }else{
                        pasw.style.border = 'none';
                        pasw.className = '';
                    }
                }
            },
            login(){
                let original = document.querySelector('input[name=original]');
                let pasw = document.querySelector('input[name=pasw]');

                if(this.originals != '' && this.paswnum != '' && (this.originals != this.paswnum)){
                   this.$router.go(-1);
                }else if(this.originals == ''){
                    original.style.border = '1PX solid red';
                    original.className = 'active_no';
                    Toast({
                        message: '请输入正确的密码！',
                        position: 'top',
                        duration: 3000
                    });
                }else if(this.paswnum == ''){
                    pasw.style.border = '1PX solid red';
                    pasw.className = 'active_no';
                    Toast({
                        message: '请输入新的密码！',
                        position: 'top',
                        duration: 3000
                    });
                }else if(this.originals == this.paswnum){
                    pasw.style.border = '1PX solid red';
                    pasw.className = 'active_no';
                    Toast({
                        message: '与原密码一致，请重新输入！',
                        position: 'top',
                        duration: 3000
                    });
                }
                else {
                    original.style.border = '1PX solid red';
                    original.className = 'active_no';
                    pasw.style.border = '1PX solid red';
                    pasw.className = 'active_no';
                    Toast({
                        message: '请输入正确修改信息！',
                        position: 'top',
                        duration: 3000
                    });
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .logining{
        width: 100%;
        padding-top: 20%;
        .logo{
            width: 100%;
            text-align: center;
            margin-bottom: 20PX;
            img{width: 20%;}
        }
        .form_box{
            width: 100%;
            text-align: center;
            input{
                width: 73%;
                background: #f3f4f6;
                text-align: center;
                padding: 14PX;
                border-radius: 3PX;
                margin: 10PX auto;
                letter-spacing: 1PX;
                box-shadow: 1PX 2PX 10PX gainsboro;
            }
            button{
                width: 80%;
                background: #356aff;
                text-align: center;
                padding: 14PX;
                border-radius: 3PX;
                margin: 8PX auto;
                color: #fff;
                border: none;
                letter-spacing: 1PX;
                font-size: 14PX;
                box-shadow: 1PX 2PX 10PX gainsboro;
            }
        }
        .pasw{
            width: 100%;
            text-align: center;
            margin-top: 6PX;
        }
        .registerby{
            width: 100%;
            text-align: center;
            margin-top: 40%;
        }
    }
</style>
<style>
    .mint-toast.is-placetop{width: 100%!important;}
    .active_no::-webkit-input-placeholder{color:red;}
</style>